<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Js缓动函数</title>
  <style>
    .demo,
    .explain {
      float: left;
    }

    .guide-rail {
      width: 400px;
      height: 60px;
      margin: 0 auto;
      border: 3px #ccc solid;
      position: relative;
      z-index: 2;
      overflow: hidden;
    }

    .ease-bar {
      width: 80px;
      height: 100%;
      border: 2px #000 solid;
      background-color: #ff1100;
      position: absolute;
      left: 0;
      box-sizing: border-box;
    }

    #radios {
      width: 500px;
    }

    #radios label {
      width: 250px;
      float: left;
      box-sizing: border-box;
      margin-bottom: 10px;
    }

    #timingMap {
      padding: 10px;
      border: 1px #ccc solid;
    }

    .sound-code {
      min-width: 400px;
      min-height: 300px;
      background-color: #fdfdfd;
      border: #ccc 1px solid;
      padding: 10px;
    }
  </style>
</head>

<body>
  <!-- S 演示部分 -->
  <div class="demo">
    <!-- 缓动函数 -->
    <div class="guide-rail">
      <div class="ease-bar" id="bar"></div>
    </div>

    <h3>缓动函数</h3>
    <div id="radios"></div>
  </div>
  <!-- E 演示部分-->

  <!-- S 说明部分 -->
  <div class="explain">
    <canvas id="timingMap" width="708" height="508"></canvas>

    <!-- 源码 -->
    <div class="sound-code">
      缓动函数代码
      <pre>
      <code id="soundCode"></code>
      </pre>
    </div>
    </code>
    </div>
    <!-- E 说明部分 -->


    <script type="module">
      import animate from './animate.js';
      import easeFunction from './ease-function/easeFunction.js'
      import timingMap from './timingMap.js'

      // 缓动函数地图
      const timingMapDom = document.querySelector('#timingMap')
      const tmmp = new timingMap(timingMapDom);

      // 点击地图触发
      tmmp.on('click', function (value) {
        if (easeFunction[value]) {
          checkRadio(value);
          radioChangeHandler(value)
        }

      })

      // 选择动画回调
      function radioChangeHandler(timing) {
        const max = 400 - 80;
        const easeBar = document.getElementById('bar');
        const soundCode = document.getElementById('soundCode');

        // 获取缓动函数源码
        soundCode.innerText = easeFunction[timing].toString();

        tmmp.checked(timing);

        // 启动动画
        animate({
          timing,
          draw: (progress) => {
            easeBar.style.left = progress * max + 'px';
          },
          duration: 2000
        });

      }

      // 监听选择动画函数
      let radios = document.getElementById('radios');
      radios.addEventListener('change', (event) => {
        let { value, type, id } = event.target;
        if (type === 'radio') {
          radioChangeHandler(value)
        }
      })


      // 生成单选选项
      function createRadio() {
        let htmlText = '';
        Object.keys(easeFunction).forEach((name) => {
          htmlText += `
        <label for="${name}">
          <input type="radio" name="ease" value="${name}" id="${name}">
          ${name}
        </label>
        `;
        });

        radios.innerHTML = htmlText;
      }
      createRadio();

      let checkedRadio = "";
      function checkRadio(id) {

        if (checkedRadio) {
          (document.getElementById(checkedRadio)).removeAttribute('checked');
        }

        document.getElementById(id).checked = true;
      }


    </script>
</body>

</html>